<template>
  <div class="page-container">
    <!--表格内容栏-->
    <ac-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      @handleTableOperator="handleTableOperator"
      @handleCellOperator="handleCellOperator"
    />

    <!--新增/编辑/查看界面-->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      :close-on-click-modal="false"
      class="dialog-box no-padding"
      destroy-on-close
      draggable
      fullscreen
    >
      <div class="page-container">
        <el-form
          :model="formData"
          ref="dataForm"
          label-width="120px"
          label-position="right"
          style="padding: 10px"
          :disabled="!dialogEdit"
          :rules="rules"
          :hide-required-asterisk="!dialogEdit"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="任务名称" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="同时采集数量" prop="syncCount">
                <ac-number v-model="formData.syncCount" point="0" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="采集方式" prop="syncMode">
                <ac-buttons v-model="formData.syncMode" options="自动,手动" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.syncMode === '自动'">
            <el-col :span="8">
              <el-form-item label="采集类型" prop="syncType">
                <ac-buttons
                  v-model="formData.syncType"
                  options="每天,每周,每月,自定义"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formData.syncType !== '自定义'">
              <el-form-item label="采集时间" prop="syncTime">
                <el-time-picker v-model="formData.syncTime" value-format="HH:mm:ss" placeholder="时间" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.syncType === '每周'">
              <el-form-item label="采集周期" prop="syncPeriod">
                <ac-checkbox
                  v-model="formData.syncPeriod"
                  options="星期一,星期二,星期三,星期四,星期五,星期六,星期天"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.syncType === '每月'">
              <el-form-item label="采集周期" prop="syncPeriod">
                <ac-checkbox
                  v-model="formData.syncPeriod"
                  options="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formData.syncType === '自定义'">
              <el-form-item label="采集表达式" prop="syncExpression">
                <template #label>
                  <div>
                    <span>表达式</span>
                    <el-tooltip placement="right">
                      <template #content>
                        <p>cron表达式格式: [秒] [分] [小时] [日] [月] [周] [年]</p>
                        <p>以秒为示例：</p>
                        <p style="text-indent: 28px">单值取值示例：5 * * * * ? *</p>
                        <p style="text-indent: 28px">多值取值示例：0,5,12 * * * * ? *</p>
                        <p style="text-indent: 28px">连续取值示例：0-12 * * * * ? *</p>
                        <p style="text-indent: 28px">每隔五秒示例：0/5 * * * * ? *</p>
                        <p>取值范围：秒(0~59)，分(0~59)，小时(0~23)，日(1~31)，月(0~11，0为1月)，周(1~7，1为星期日)，年(1970~2099)</p>
                        <p>示例：0 0/10 9-10 * * ?</p>
                        <p style="text-indent: 28px">每天上午9点到11点之间每10分钟触发一次</p>
                        <p>* 匹配所有可能的值</p>
                        <p>- 指定范围</p>
                        <p>/ 指定间隔值</p>
                        <p>? 不指定值，只能用在日周中</p>
                        <p>, 指定枚举值</p>
                        <p>L 表示最后，只能用在日和周中</p>
                        <p>W 工作日，只能用在日中</p>
                        <p>LW 月中最后一个工作日，只能用在日中</p>
                        <p># 月中第几个星期几：3#4 表示月的第三个星期四，只能用在周中</p>
                      </template>
                      <ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>
                    </el-tooltip>
                  </div>
                </template>
                <el-input v-model="formData.syncExpression" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="来源数据源" prop="originDatasourceId">
                <ac-remote-select
                  v-model="formData.originDatasourceId"
                  dataUrl="/system/datasource/queryPage"
                  :option="{id: formData.originDatasourceId, name: formData.originDatasourceName}"
                  @change="changeOriginDatasource"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标数据源" prop="targetDatasourceId">
                <ac-remote-select
                  v-model="formData.targetDatasourceId"
                  dataUrl="/system/datasource/queryPage"
                  :option="{id: formData.targetDatasourceId, name: formData.targetDatasourceName}"
                  @change="changeTargetDatasource"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formData.syncMode === '自动'">
              <el-form-item label="状态" prop="status">
                <ac-radio
                  v-model="formData.status"
                  options="正常,暂停"
                ></ac-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!dialogEdit">
            <el-col :span="8">
              <el-form-item label="更新时间" prop="updateTime">
                <ac-datetime v-model="formData.updateTime" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间" prop="createTime">
                <ac-datetime v-model="formData.createTime" />
              </el-form-item>
            </el-col>
          </el-row>

          <div class="table-select-box">
            <div class="table-name-box" v-if="dialogEdit">
              <div class="table-name-box-line">
                <div class="table-name-tips">可选表 </div>
                <el-input v-model="filterValue" />
              </div>
              <div class="table-name-select">
                <el-checkbox-group
                  v-model="checkedList"
                  @change="checkboxChange"
                >
                  <div v-for="(table, index) in checkboxList" :key="index">
                    <el-checkbox
                      :label="table.tableName"
                      :value="table.tableName"
                    />
                  </div>
                </el-checkbox-group>
              </div>
            </div>
            <div class="table-box">
              <div class="table-header">
                <span class="table-name-tips">已选表</span>
                <span class="table-tool" v-if="dialogEdit">
                  <span style="display: inline-flex; margin-right: 8px">同步表配置</span>
                  <ac-buttons v-model="syncType" options="全量,增量" @change="changeSyncType" />
                  <ac-buttons v-model="writeMode" options="更新,删除重写" @change="changeWriteMode" />
                  <ac-number style="width: 150px" v-model="readCount" point="0" @change="changeReadCount" />
                  <el-input style="width: 150px" v-model="tablePrefix" placeholder="目标表前缀" @change="fillTargetInfo" />
                </span>
              </div>
              <!--表格栏-->
              <el-table
                ref="collectTable"
                class="edit-table"
                width="100%"
                border
                :data="formData.tableList"
              >
                <el-table-column
                  header-align="center"
                  prop="originTable"
                  label="来源表"
                  min-width="120"
                  :show-overflow-tooltip="{
                    'effect': 'light',
                    'raw-content': false,
                    'placement': 'bottom',
                    'popper-class': 'padding-10-15'
                  }"
                />
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="targetTable"
                  label="目标表"
                  min-width="120"
                >
                  <template #default="{ row }">
                    <ac-select
                      v-model="row.targetTable"
                      :options="targetTableOptions"
                      @change="changeTargetTable(row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="syncType"
                  label="同步类型"
                  width="80"
                >
                  <template #default="{ row }">
                    <ac-select v-model="row.syncType" options="全量,增量" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="writeMode"
                  label="写入模式"
                  width="110"
                >
                  <template #default="{ row }">
                    <ac-select v-model="row.writeMode" options="更新,删除重写" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  prop="readCount"
                  label="读取数量"
                  width="90"
                >
                  <template #default="{ row }">
                    <ac-number v-model="row.readCount" point="0" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="增量字段"
                  width="100"
                >
                  <template #default="{ row }">
                    <ac-select
                      v-if="row.syncType === '增量'"
                      v-model="row.incrementField"
                      :options="row.timeFields"
                      allow-create
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="增量开始时间"
                  width="160"
                >
                  <template #default="{ row }">
                    <ac-datetime v-if="row.syncType === '增量'" v-model="row.incrementEndTime" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="来源表主键字段"
                  width="120"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.originPrimaryKey" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="目标表主键字段"
                  width="120"
                >
                  <template #default="{ row }">
                    <el-input v-model="row.targetPrimaryKey" />
                  </template>
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="字段配置"
                  width="100"
                >
                  <template #header>
                    <span style="margin-right: 5px">字段配置</span>
                    <el-tooltip>
                      <template #content>
                        <div>不配置字段时，来源表字段必须与目标表字段一致，包括字段数量与及字段类型都需要一致</div>
                        <div>配置同步字段时，根据配置的字段映射关系进行同步</div>
                      </template>
                      <ac-icon iconId="018dca8ec9890493be26" />
                    </el-tooltip>
                  </template>
                  <template #default="{ row }">
                    <el-button link type="primary" @click="configSyncField(row)">配置</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer>
        <el-button 
          v-if="dialogEdit"
          size="default"
          type="info"
          @click="dialogVisible=false"
        >取消</el-button>
        <el-button 
          v-if="dialogEdit"
          size="default"
          type="primary"
          @click="submitForm"
          :loading="editLoading"
        >提交</el-button>
        <el-button 
          v-if="!dialogEdit"
          size="default"
          type="info"
          @click="dialogVisible=false"
        >关闭</el-button>
      </template>
    </el-dialog>

    <!-- 字段编辑 -->
    <el-dialog
      v-model="fieldVisible"
      width="1200px"
      title="同步字段配置"
      :close-on-click-modal="false"
      class="dialog-box no-padding"
      destroy-on-close
      draggable
    >
      <div class="page-container">
        <div style="margin-bottom: 5px">
          <span>
            <span>新增&nbsp;</span>
            <el-input
              v-model.number="fieldRow"
              auto-complete="off"
              style="width:50px"
            ></el-input>
            <span>&nbsp;行&nbsp;</span>
          </span>
          <el-button type="success" @click="addField">确定</el-button>
          <el-button type="success" @click="loadAll">加载所有字段</el-button>
        </div>
        <el-table
          ref="collectTable"
          class="edit-table"
          width="100%"
          border
          :data="fieldList"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="originColumn"
            label="来源字段"
            min-width="160"
          >
            <template #default="{ row }">
              <ac-select
                v-model="row.originColumn"
                :options="originColumns"
                @change="changeOriginColumn(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="originColumnType"
            label="来源字段类型"
            width="200"
          />
          <el-table-column
            header-align="center"
            align="center"
            prop="targetColumn"
            label="目标字段"
            min-width="160"
          >
            <template #default="{ row }">
              <ac-select
                v-model="row.targetColumn"
                :options="targetColumns"
                @change="changeTargetColumn(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="targetColumnType"
            label="目标字段类型"
            width="200"
          />
          <el-table-column
            header-align="center"
            align="center"
            prop="dataConvert"
            label="数据转换"
            width="120"
          >
            <template #default="{ row }">
              <ac-select v-model="row.dataConvert" options="不转换,默认值,日期格式化,时间转秒,时间转毫秒,秒转时间,毫秒转时间" />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="dataConvert"
            label="转换参数"
            width="180"
          >
            <template #default="{ row }">
              <ac-input v-model="row.convertParam" />
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="操作"
            width="70"
          >
            <template #default="{ $index }">
              <el-button link type="danger" @click="removeField($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="fieldVisible=false"
        >取消</el-button>
        <el-button
          size="default"
          type="primary"
          @click="configSyncFieldSubmit"
        >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '@/http/api';
import tool from "@/utils/tool";

const filters = ref({
  name: '',
  status: ''
});

const filterFields = ref([
  {prop: "name", label: "任务名称"},
  {prop: "status", label: "状态", type: 'select', options: '正常,暂停'},
]);

const columns = ref([
  {prop: "name", label: "任务名称", minWidth: 200, click: true},
  {prop: "syncCount", label: "同时采集数量", type: 'number', width: 140},
  {prop: "syncMode", label: "采集方式", width: 100},
  {prop: "syncType", label: "采集类型", width: 100},
  {prop: "syncTime", label: "采集时间", width: 120},
  {prop: "syncExpression", label: "采集表达式", width: 120},
  {prop: "originDatasourceName", label: "来源数据源", width: 160},
  {prop: "targetDatasourceName", label: "目标数据源", width: 160},
  {prop: "status", label: "状态", width: 100},
  {prop: "updateTime", label: "更新时间", width: 160, type: "datetime"},
  {prop: "createTime", label: "创建时间", width: 160, type: "datetime"},
]);

const rules = ref({
  name: [
    {required: true, message: '请输入名称', trigger: 'change'},
    {max: 100, message: '长度必须小于等于 100 个字符！', trigger: 'change'}
  ],
  syncCount: [
    {required: true, message: '请输入同时采集数量', trigger: 'change'}
  ],
  syncMode: [
    {required: true, message: '请输入采集方式', trigger: 'change'},
    {max: 10, message: '长度必须小于等于 10 个字符！', trigger: 'change'}
  ],
  syncType: [
    {required: true, message: '请输入采集类型', trigger: 'change'},
    {max: 10, message: '长度必须小于等于 10 个字符！', trigger: 'change'}
  ],
  syncTime: [
    {required: true, message: '请输入采集时间', trigger: 'change'}
  ],
  syncPeriod: [
    {required: true, message: '请输入采集周期', trigger: 'change'}
  ],
  syncExpression: [
    {required: true, message: '请输入采集表达式', trigger: 'change'},
    {max: 50, message: '长度必须小于等于 50 个字符！', trigger: 'change'}
  ],
  originDatasourceId: [
    {required: true, message: '请输入来源数据源', trigger: 'change'},
    {max: 20, message: '长度必须小于等于 20 个字符！', trigger: 'change'}
  ],
  targetDatasourceId: [
    {required: true, message: '请输入目标数据源', trigger: 'change'},
    {max: 20, message: '长度必须小于等于 20 个字符！', trigger: 'change'}
  ],
  status: [
    {required: true, message: '请选择状态', trigger: 'change'},
  ],
});

const dataTable = ref();
const dataForm = ref();
const formData = ref({});
const tableList = ref([]);
const checkedList = ref([]);
const dialogTitle = ref('');
const dialogVisible = ref(false);
const editLoading = ref(false);
const dialogEdit = ref(false);

const syncType = ref('全量');
const writeMode = ref('删除重写');
const readCount = ref(3000);
const tablePrefix = ref('');
const collectTable = ref();
const targetTableOptions = ref([]);
const filterValue = ref('');

const fieldVisible = ref(false);
const fieldRow = ref(1);
const fieldList = ref([]);
const currentTable = ref({});
const originColumns = ref('');
const targetColumns = ref('');

const handleCellOperator = async(property, value, row) => {
  formData.value = Object.assign({}, await loadData(row.id));
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";
  tableList.value = [];
  checkedList.value = [];
  filterValue.value = '';

  await nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const handleTableOperator = async(button, row) => {
  syncType.value = '全量';
  writeMode.value = '删除重写';
  readCount.value = 3000;
  tablePrefix.value = '';
  tableList.value = [];
  checkedList.value = [];
  filterValue.value = '';

  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.name;

  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, await loadData(row.id), {button: button});
    await nextTick(async () => {
      await loadTableList(formData.value.originDatasourceId);
      changeTargetDatasource({id: formData.value.targetDatasourceId});
      formData.value.tableList.forEach(table => {
        checkedList.value.push(table.originTable);
      });
    });
  } else {
    formData.value = {syncMode: '自动', syncType: '每天', status: '正常', tableList: [], syncCount: 10, button: button};
  }

  await nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const loadData = async(id) => {
  const res = await api.post('/system/collectTask/queryBy', {id: id});
  return res.data || {};
};

const loadTableList = async(datasourceId) => {
  if (!datasourceId) return;

  const res = await api.post('/system/datasource/queryColumnList', {id: datasourceId});
  tableList.value = res.data || [];
  formData.value.tableList.forEach(row => {
    const table = tableList.value.find(item => item.tableName === row.originTable);
    row.timeFields = table.fieldList.map(column => column.columnName).join(',');
  });
};

const checkboxChange = (checkList) => {
  formData.value.tableList.forEach((item, index) => {
    if (checkList.indexOf(item.originTable) < 0) {
      formData.value.tableList.splice(index, 1);
    }
  });

  for (const tableName of checkList) {
    const index = formData.value.tableList.findIndex(item => item.originTable === tableName);
    if (index < 0) {
      const table = tableList.value.find(item => item.tableName === tableName);
      const targetTable = targetTableList.value.find(item => item.tableName === tablePrefix.value + tableName);
      formData.value.tableList.push({
        originTable: table.tableName,
        originPrimaryKey: table.pkIdName || '',
        targetTable: targetTable ? targetTable.tableName : '',
        targetPrimaryKey: targetTable ? targetTable.pkIdName : '',
        syncType: syncType.value,
        writeMode: writeMode.value,
        readCount: readCount.value,
        timeFields: table.fieldList.map(column => column.columnName).join(',')
      });
    }
  }
};

const changeTargetTable = (row) => {
  if (!row.targetTable) return;
  row.targetPrimaryKey = targetTableList.value
    .find(table => table.tableName === row.targetTable).pkIdName;
};

const configSyncField = (row) => {
  if (!row.originTable) {
    ElMessage.error("请选择来源表！");
    return;
  }
  if (!row.targetTable) {
    ElMessage.error("请选择目标表！");
    return;
  }

  currentTable.value = row;
  originColumns.value = tableList.value.find(table => table.tableName === row.originTable).fieldList.map(field => field.columnName).join(',');
  targetColumns.value = targetTableList.value.find(table => table.tableName === row.targetTable).fieldList.map(field => field.columnName).join(',');
  fieldList.value = currentTable.value.columnList || [];
  fieldVisible.value = true;
};

const addField = () => {
  for (let i=0; i<fieldRow.value; i++) {
    fieldList.value.push({});
  }
};

const loadAll = () => {
  const originFieldList = tableList.value.find(table => table.tableName === currentTable.value.originTable).fieldList;
  originFieldList.forEach(field => {
    if (!fieldList.value.find(item => item.originColumn === field.columnName)) {
      const targetColumn = targetTableList.value
        .find(table => table.tableName === currentTable.value.targetTable)
        .fieldList.find(item => item.columnName === field.columnName);

      fieldList.value.push({
        originColumn: field.columnName,
        originColumnType: field.columnType,
        targetColumn: targetColumn?.columnName,
        targetColumnType: targetColumn?.columnType,
      });
    }
  });
};

const removeField = (index) => {
  fieldList.value.splice(index, 1);
};

const changeOriginColumn = (row) => {
  if (!row.originColumn) return;
  row.originColumnType = tableList.value
    .find(table => table.tableName === currentTable.value.originTable)
    .fieldList.find(field => field.columnName === row.originColumn).columnType;
};

const changeTargetColumn = (row) => {
  if (!row.targetColumn) return;
  row.targetColumnType = targetTableList.value
    .find(table => table.tableName === currentTable.value.targetTable)
    .fieldList.find(field => field.columnName === row.targetColumn).columnType;
};

const configSyncFieldSubmit = () => {
  const originColumnName = new Set();
  const targetColumnName = new Set();
  for (const column of fieldList.value) {
    if (!column.originColumn && column.dataConvert !== '默认值') {
      ElMessage.error("来源字段不能为空！");
      return;
    }
    if (!column.targetColumn) {
      ElMessage.error("目标字段不能为空！");
      return;
    }

    if (originColumnName.has(column.originColumn)) {
      ElMessage.error("来源字段【" + column.originColumn + "】重复，请删除其中一个！");
      return;
    }
    originColumnName.add(column.originColumn);

    if (targetColumnName.has(column.targetColumn)) {
      ElMessage.error("目标字段【" + column.targetColumn + "】重复，请删除其中一个！");
      return;
    }
    targetColumnName.add(column.targetColumn);
  }

  currentTable.value.columnList = fieldList.value || [];
  fieldVisible.value = false;
};

const changeOriginDatasource = (data) => {
  checkedList.value = [];
  formData.value.tableList = [];
  if (!data || !data.id) return;

  api.post('/system/datasource/queryColumnList', {id: data.id}).then(res => {
    tableList.value = res.data || [];
  });
};

const checkboxList = computed(() => {
  if (filterValue.value) {
    return tableList.value.filter(table => table.tableName.indexOf(filterValue.value) >= 0);
  } else {
    return tableList.value;
  }
});

const targetTableList = ref([]);
const changeTargetDatasource = (data) => {
  targetTableList.value = [];
  targetTableOptions.value = [];
  if (!data || !data.id) return;

  api.post('/system/datasource/queryColumnList', {id: data.id}).then(res => {
    targetTableList.value = res.data || [];
    fillTargetInfo();
  });
};

const fillTargetInfo = () => {
  targetTableList.value.forEach(item => {
    const row = formData.value.tableList.find(table =>
      item.tableName === tablePrefix.value + table.originTable && table.targetTable === '');
    if (row) {
      row.targetTable = row.targetTable || item.tableName;
      row.targetPrimaryKey = row.targetPrimaryKey || item.pkIdName || '';
    }
    targetTableOptions.value.push({
      key: item.tableName,
      value: item.tableName
    });
  });
};

const changeSyncType = (syncType) => {
  formData.value.tableList.forEach(table => table.syncType = syncType);
};

const changeWriteMode = (writeMode) => {
  formData.value.tableList.forEach(table => table.writeMode = writeMode);
};

const changeReadCount = (readCount) => {
  formData.value.tableList.forEach(table => table.readCount = readCount);
};

const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        const data = tool.deepClone(formData.value);
        api.post(formData.value.button.dataDestUrl, data).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          dataTable.value.findPage();
          editLoading.value = false;
        }).catch(() => {
          editLoading.value = false;
        })
      }).catch(() => {});
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  })
};
</script>

<style scoped lang="scss">
.dialog-box .page-container {
  :deep(.el-form) {
    display: flex;
    flex-direction: column;
    height: 1px;
    flex-grow: 1;
  }
  .table-select-box {
    height: 1px;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
  }
  .table-name-box {
    width: 250px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #b2b2b2;
    .table-name-box-line {
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #b2b2b2;
      padding: 0 8px 8px 0;
      .table-name-tips {
        flex-shrink: 0;
        font-weight: bolder;
        font-size: 18px;
        display: flex;
        align-items: center;
        padding-right: 8px;
      }
    }
    .table-name-select {
      overflow-x: auto;
      margin-top: 10px;
    }
  }
  .table-box {
    width: 1px;
    flex-grow: 1;
    .table-header {
      display: flex;
      flex-direction: row;
      .table-name-tips {
        font-weight: bolder;
        font-size: 18px;
        padding: 5px 0 10px 0;
      }
      .table-tool {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 5px;
        margin-left: 10px;
      }
      .table-tool > * {
        margin-right: 8px;
      }
    }
    .edit-table :deep(td):first-child .cell {
      padding: 0 12px!important;
      display: block;
    }
  }
}
</style>